<template>
  <div class="form-box">
    {{ checked }}
    <el-checkbox v-model="checked" :disabled="check_dis">备选项</el-checkbox>
    <input type="text" v-model="val" />
    <cupload ref="cupload" @upload="upload"></cupload>
    <el-button @click="add" :disabled="!checked"> 添加 </el-button>
    {{ data_arr }}
    <!-- <ul>
      <li v-for="(item, index) in date_list" :key="'data' + index">
        <span>{{ item.name }}</span>
        <strong
          ><span>{{ item.price }}元</span></strong
        >
        {{ item.radio }}
        <el-checkbox v-model="item.radio" :label="true">打勾</el-checkbox>
      </li>
    </ul>
    <div>总价:{{ total }}</div>
    <button @click="btn">上传</button>
    <div style="display: none">
      <input ref="file" type="file" @change="file_change" />
    </div> -->
  </div>
</template>
<script>
import { hello } from "../api/index";
import $ from "jquery";
import cupload from "./upload.vue";
export default {
  components: {
    cupload,
  },
  data() {
    return {
      date_list: [],
      val: "",
      data_arr: [],
      checked: false,
      check_dis: true,
    };
  },
  computed: {
    total: function () {
      return this.date_list
        .map((res) => {
          if (res.radio === true) {
            return res.price;
          } else {
            return 0;
          }
        })
        .reduce((b, a) => {
          return b + a;
        }, 0);
    },
  },
  created() {
    hello().then((res) => {
      let arr = res.data.data.map((res) => {
        res.radio = false;
        return res;
      });
      this.date_list = arr;
      console.log(res, $);
    });
  },
  methods: {
    file_change(e) {
      console.log(e);
    },
    btn() {
      this.$refs.file.click();
    },
    add() {
      this.data_arr.push({
        val: this.val,
        id: this.$refs.cupload.fileList.join(""),
      });
    },
    upload(val) {
      console.log(val, "s");
      this.check_dis = val;
    },
  },
};
</script>
